<template>
	<view class="theme_bg_vice_color">
		<cu-custom id="nav" :isBack="true"  :backColor="'text-black'">
			<block slot="backText">
				<view class="text-black ">
					我的会员
				</view>
			</block>
		</cu-custom>
		<view class="padding-sm">
			<view class="cu-card bg-brown radius text-center padding-tb">
				<view class="text-lg">我的会员</view>
				<view class="text-bold margin-top-xs" style="font-size: 50rpx;">{{member==1?'超级会员':'普通会员'}}</view>
				<view v-if="expiration_time" class="margin-top-xs">过期日期:{{expiration_time}}</view>
			</view>
			<view class="margin-tb-sm">
				<view class="text-bold">VIP会员套餐</view>
				<!-- <scroll-view scroll-x="true" class="scroll-view_H margin-top-sm flex justify-start"> -->
				<view class="scroll-view_H margin-top-sm flex justify-start flex-wrap">
					<view class="item radius12 margin-top-sm scroll-view-item_H text-center margin-lr-xs" style="flex: 0 0 30%;" :class="{'selectIndex':selectIndex==index}" v-for="(item,index) in dataList" :key="index" @click="select(index)" >
						<view class="text-bold margin-top-sm text-cut padding-lr-sm">{{item.name}}</view>
						<view class="text-yellow margin-top-sm text-bold"><text>￥</text><text class="text-sl">{{item.money}}</text></view>
						<view class="text-gray margin-top-xs" style="text-decoration: line-through;"><text>￥</text><text class="text-xl">{{item.original_price}}</text></view>
					</view>
				</view>
				<!-- </scroll-view> -->
			</view>
			
			<view>
				<button class="cu-btn round bg-yellow block lg" @click="getMenber">{{member==1?'立即续费':'立即开通'}}</button>
			</view>
			<view class="margin-tb-sm">
				<mp-html :content="dataList[selectIndex].desc" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList:[],
				selectIndex:0,
				
				member:0,
				expiration_time:'',
			}
		},
		onLoad() {
			this.$u.api.getMenberList().then(res=>{
				this.dataList=res.data
			})
			this.userMember()
		},
		methods:{
			getMenber(){
				this.$u.api.getMenber({
					userId:this.vuex_user.id,
					id:this.dataList[this.selectIndex].id
				}).then(res=>{
					if(res.code===200){
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: 'prepay_id=' + res.data.prepayId,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: res1 => {
								console.log('success:' + JSON.stringify(res1));
								this.$Toast('成功','success',1000,setTimeout(()=>{
									this.userMember()
								},1000))
							},
							fail: err => {
								console.log('fail:' + JSON.stringify(err));
							}
						});
						
					}
				})
			},
			userMember(){
				this.$u.api.userBalanceInfo({
					userId:this.vuex_user.id
				}).then(res=>{
					this.member=res.data.member
					this.expiration_time=res.data.expiration_time
				})
			},
			select(index){
				this.selectIndex=index
			}
		}
	}
</script>

<style lang="scss">
	.item{
		width: 200rpx;
		height: 250rpx;
		background-color: #fff;
	}
	.selectIndex{
		border: 4rpx solid #d3ad13;
		background-color: rgba(#d3ad13,0.1);
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	
	.scroll-view-item_H {
		display: inline-block;
	}
</style>
